<template>
  <div class="user">
    <el-row class="topw">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>园区管理</el-breadcrumb-item>
          <el-breadcrumb-item>租赁备案</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row style="padding:10px 0">
      <el-col :span="24">
        <!-- 给组件绑定原生事件的话，需要一个.native的修饰符 -->
        <el-input placeholder="请输入内容" class="search-input" v-model="companyName" @keydown.native.enter="initList">
          <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
        </el-input>
        <el-button type="success" plain @click="addDialogFormList=true">租赁备案需求列表</el-button>
      </el-col>
    </el-row>
    <el-table class="margin-20" v-loading="loading" :data="InCoRegList" border style="width: 100%">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="companyName" label="企业名称">
      </el-table-column>
      <el-table-column prop="name" label="企业负责人">
      </el-table-column>
      <el-table-column prop="phone" label="联系电话">
      </el-table-column>
      <el-table-column prop="demands" label="服务需求">
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>
      <el-table-column label="操作" width="125">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="showDeleteDialog(scope.row)">
          </el-button>
          <!-- <el-button size="mini" type="warning" plain icon="el-icon-check" @click="showGrantDialog(scope.row)">
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
        :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 添加用户对话框 -->
    <el-dialog title="添加服务需求" :visible.sync="addDialogFormVisible">
      <el-form :model="addForm" label-width="100px" :rules="rules" ref="addUserForm">
        <el-form-item label="服务需求:" prop="need">
          <el-input v-model="addForm.need" auto-complete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserSubmit('addUserForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑租赁备案" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm" label-width="120px" :rules="rules" ref="editUserForm">
        <el-form-item label="企业名称" prop="companyName">
          <el-input v-model="editForm.companyName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="企业负责人" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="editForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="服务需求">
          <el-select v-model="editForm.demands" multiple placeholder="请选择">
            <el-option
              v-for="item in addInCoRegForm"
              :key="item.id"
              :label="item.need"
              :value="item.need">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="editForm.remark" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 需求列表 -->
    <el-dialog title="服务列表" :visible.sync="addDialogFormList">
      <el-button type="success" plain @click="addDialogFormVisible=true">添加服务需求</el-button>
      <el-table class="margin-20" v-loading="loading" :data="addInCoRegForm" ref="addListForm" border style="width: 100%">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="need" label="服务需求">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="DeleteDialog(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-dialog>
  </div>
</template>
<script>
  import {
    RentList,
    addRent,
    editRent,
    deleteRent,
    addRentservice,
    addRentservicelist,
    deleteRentservice,
    RentoneList
  } from '@/api'
  export default {
    data() {
      return {
        InCoRegList: [],
        InCoRegselect:[],
        addInCoRegForm:[],
        companyName:"",
        query: '',
        total: 0,
        pagesize: 10,
        pagenum: 1,
        addDialogFormVisible: false,
        addForm: {
          need:""
        },
        addDialogFormList: false,
        addListForm: {
          need:""
        },
        editDialogFormVisible: false,
        editForm: {
          name: '',
          phone: '',
          companyName: '',
          enterpriseInformationId:"",
          contractId:'',
          demands:[],
          remark:''
        },
        grantDialogFormVisible: false,
        grantForm: {},
        roleList: [],
        roleId: '',
        // 添加用户的表单验证
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
        }
      }
    },
    created() {
      this.initList()
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.initList()
      },
      initList() {
        this.loading = true
        RentList({
          params: {
            companyName:this.companyName,
            page: this.pagenum-1,
            size : this.pagesize,
            sortField: 'createTime',
            sortType:'dsc'
          }
        }).then(res => {
          console.log(res)
          this.InCoRegList = res.data.content
          this.total = res.data.totalElements
          this.loading = false
          this.InCoRegList.forEach(element => {
            element.demands = ""+JSON.parse(element.demands)
            element.demands = element.demands.replace(/\,/g, '\、')
          });
        })
        addRentservicelist().then(res => {
          this.addInCoRegForm = res.data
        })
      },
      // 添加服务需求
      addUserSubmit(formName){
         this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(123213)
            addRentservice(this.addForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '创建用户成功'
                })
              this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.message
                })
              }
              this.addDialogFormVisible = false
            })
          }
        })
      },
      closeDiaglog(){
        this.$refs['addUserForm'].resetFields()
      },
      // 显示编辑用户对话框
      showEditDialog(row) {
        console.log(row)
        this.editDialogFormVisible = true
        RentoneList(row.contractId).then(res => {
          this.editForm.demands = JSON.parse(res.data.demands)
        })
        // JSON.parse
        // JSON.stringify
        // getUserById(row.id).then(res => {
        //   if (res.meta.status === 200) {
            this.editForm.name = row.name
            this.editForm.phone = row.phone
            this.editForm.companyName = row.companyName
            this.editForm.enterpriseInformationId = row.enterpriseInformationId
            // var demands = JSON.parse(row.demands)
            // console.log(demands)
            this.editForm.demands = row.demands
            this.editForm.contractId = row.contractId
            this.editForm.remark = row.remark
        //   }
        // })
      },
      // 编辑用户提交
      editUserSubmit(formName) {
        this.$refs[formName].validate(valide => {
          if (valide) {
            console.log(this.editForm)
            this.editForm.demands=JSON.stringify(this.editForm.demands) 
            editRent(this.editForm).then(res => {
              console.log(res)
              if (res.status === 0) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.editDialogFormVisible = false
                this.initList()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.meta.msg
                })
              }
            })
          }
        })
      },
      // 显示删除对话框
      showDeleteDialog(row) {
        console.log(row)
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          deleteRent({
          params: {
            contractId:row.contractId
          }
        }).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 显示删除对话框
      DeleteDialog(row) {
        console.log(row)
        this.$confirm('是否删除该服务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 执行删除用户操作
          deleteRentservice({
          params: {
            id:row.id
          }
        }).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initList()
            } else {
              this.$message({
                type: 'warning',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 显示分配角色对话框
      // showGrantDialog(row) {
      //   this.grantForm = row
      //   this.grantDialogFormVisible = true
      //   getRoleList().then(res => {
      //     console.log(res)
      //     if (res.meta.status === 200) {
      //       this.roleList = res.data
      //     }
      //   })
      // },
      // 分配角色
      // grantUserSubmit() {
      //   if (!this.roleId) {
      //     this.$message({
      //       type: 'warning',
      //       message: '角色不能为空，请选择！'
      //     })
      //   } else {
      //     grantUserRole({
      //       id: this.grantForm.id,
      //       rid: this.roleId
      //     }).then(res => {
      //       if (res.meta.status === 200) {
      //         this.$message({
      //           type: 'success',
      //           message: '设置角色成功'
      //         })
      //         this.grantDialogFormVisible = false
      //       } else {
      //         this.$message({
      //           type: 'error',
      //           message: res.meta.msg
      //         })
      //       }
      //     })
      //   }
      // }
    }
  }

</script>
<style lang="scss" scoped>
  .user {
    .margin-20 {
      margin: 20px 0;
    }

    .search-input {
      width: 300px;
    }

    .page {
      padding: 5px 0;
      background-color: #D3DCE6;
    }
  }

</style>
